<template>
	<view>
		<view class="card">
			<view class="jetitle u-flex">
				{{$z.$t("充电金额")}}
			</view>
			<view class="u-flex jebox">

				<u-input v-model="jevalue" type="number" border="false" @blur="blur" />
				{{$z.$t("元")}}
			</view>
			<view class="u-flex u-flex-between" style="flex-wrap: wrap; padding: 40rpx 0;padding-bottom: 20rpx;">
				<!-- #ifndef MP-WEIXIN -->
				<u-button v-for=" (item, key) in jes" :key="key" class="jeitem" v-bind="item.attrs" :text="item.label"
					@click="itemtap(item)" :custom-style="btnstyle"></u-button>
				<!-- #endif -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "cardje",
		props: {
			ChargeCar: {
				type: Object,
				default: () => {},
			},
			value: {
				type: [String, Number],
				default: "0",
			},
		},
		data() {
			return {
				btnstyle: {
					marginBottom: "20rpx",
					marginRight: "6rpx"
				},
				jevalue: "",
				activeje: "0",
			};
		},
		asyncComputed: {},
		computed: {
			jes() {
				let ChargeCar = this.ChargeCar;
				if (!ChargeCar.gtel) {
					return [];
				}
				if (ChargeCar.type == "1") {
					let jes = [{
							label: "20" + this.$z.$t("度"),
							number: "20",
						},
						{
							label: "40" + this.$z.$t("度"),
							number: "40",
						},
						{
							label: "50" + this.$z.$t("度"),
							number: "50",
							default: true,
						},
						{
							label: "60" + this.$z.$t("度"),
							number: "60",
						},
						{
							label: this.$z.$t("充满自停"),
							number: "200",
						},
					].map((item) => {
						let r = {
							label: item.label,
							attrs: {
								type: "primary",
								plain: true,
							},
							default: item.default,
							number: item.number,
							je: Number(ChargeCar.df).mul(item.number),
						};
						r.je == this.activeje ? (r.attrs.plain = false) : null;
						return r;
					});
					return jes;
				} else if (ChargeCar.type == "12" || ChargeCar.type == "14") {
					let jes = [{
							label: "20" + this.$z.$t("元"),
							number: "20",
						},
						{
							label: "40" + this.$z.$t("元"),
							number: "40",
						},
						{
							label: "50" + this.$z.$t("元"),
							number: "50",
							default: true,
						},
						{
							label: "60" + this.$z.$t("元"),
							number: "60",
						},
						{
							label: this.$z.$t("充满自停"),
							number: "200",
						},
					];
					jes = jes.map((item) => {
						let r = {
							label: item.label,
							attrs: {
								type: "primary",
								plain: true,
							},
							default: item.default,
							number: item.number,
							je: Number(item.number).mul(100),
						};
						r.je == this.activeje ? (r.attrs.plain = false) : null;
						return r;
					});
					return jes;
				}
			},
		},
		watch: {
			jes: {
				handler: function(val, oldval) {
					if (val.length == 0 || this.activeje != 0) {
						return;
					}
					let activeje = val.find((e) => {
						return e.default;
					});
					if (!activeje) {
						activeje = val[0];
					}
					this.itemtap(activeje);
				},
				immediate: true,
			},
		},
		methods: {
			async init() {},

			blur() {

				let je = Number(this.jevalue).mul(100);
				if (this.jevalue == "0") {
					this.jevalue = ''
					this.$u.toast(this.$z.$t("充电金额不能为零"));
					return
				} else if (this.jevalue < 0) {
					this.jevalue = ''
					this.$u.toast(this.$z.$t("充电金额必须大于零"));
					return
				} else if (isNaN(je)) {
					this.jevalue = ''
					this.$u.toast(this.$z.$t("请输入正确的充电金额"));
					return
				}
				this.activeje = this.jevalue * 100;

				this.$emit("input", this.activeje);
			},
			itemtap(item) {
				this.activeje = item.je;
				this.$emit("input", this.activeje);
			},
		},
	};
</script>

<style lang="scss">
	.card {
		margin: 30rpx 30rpx;
		background: #fff;
		border-radius: 20rpx;
		// padding-bottom: 30rpx;
		padding-top: 18rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;

		.jetitle {
			font-size: 34rpx;
			font-weight: bold;
			height: 70rpx;
		}

		.jebox {
			border-bottom: 2rpx solid $uni-border-color;
		}
	}

	.jeitem {
		width: auto;
		height: 60rpx;
		margin: 0;
		// margin-right: 70rpx;
		// margin-bottom: 18rpx;
	}
</style>